<template>
    <div class="bg page-servecreate">
        <div id="serveName" class="open-picker">
        	<label>创建服务页原始静态页面</label>
        	<p>{{serveName}}</p>
        	<i></i>
        </div>
        
        <div class="item input">
        	<div class="title">
	        	<h3>用户信息</h3>
        	</div>
        	<ul>
        		<li class="require">
        			<label>区域<em>*</em></label>
        			<input type="text" placeholder="点击输入" />
        		</li>
        		<li class="require">
        			<label>门店名称<em>*</em></label>
        			<input type="text" placeholder="点击输入" />
        		</li>
        		<li>
        			<label>店长电话<em>*</em></label>
        			<input type="text" placeholder="点击输入" />
        		</li>
        	</ul>
        </div>
        
        <div class="item checkbox">
        	<div class="title">
	        	<h3>时的感受</h3>
	        	<p>备注;啥都离开饭卡啥的副科级</p>
        	</div>
        	<ul class="text">
        		<li>
        			<p>
	        			<label>
							<mycheckbox :getStatus="getStatus" :kw="'test-1'" :ds="'testdata'" ></mycheckbox>
	        			</label>
	        			fdsa阿斯蒂芬阿斯蒂芬阿斯达回复卡上发四大皆空会罚款商机啊电话费卡萨大黄蜂科技时代发哈德会计法撒娇的开发啥看到回复
        			</p>
        		</li>
        		<li>
        			<p>
	        			<label>
							<mycheckbox :getStatus="getStatus" :kw="'test-2'" :ds="'testdata'" ></mycheckbox>
	        			</label>
	        			撒地方阿斯达
        			</p>
        		</li>
        		<li>
        			<p>
	        			<label>
							<mycheckbox :getStatus="getStatus" :kw="'test-3'" :ds="'testdata'" ></mycheckbox>
	        			</label>
	        			撒地方阿斯达
        			</p>
        		</li>
        	</ul>
        </div>
        
        <div class="item radio">
        	<div class="title">
	        	<h3>用户信息</h3>
	        	<p>备注;啥都离开饭卡啥的副科级</p>
        	</div>
        	<ul class="text">
        		<li>
        			<p>
	        			<label>
	        				<myradio :ds="myradio" :change="onchange" :kw="1" ></myradio>
	        			</label>
	        			dfasd fdsagd a电饭锅是大法官的双方各
        			</p>
        			<input type="text" placeholder="输入备注" />
        		</li>
        		<li>
        			<p>
	        			<label>
	        				<myradio :ds="myradio" :change="onchange" :kw="2" ></myradio>
	        			</label>
	        			dfasd fdsagd a电饭锅是大法官的双方各
        			</p>
        			<input type="text" placeholder="输入备注" />
        		</li>
        		<li>
        			<p>
	        			<label>
	        				<myradio :ds="myradio" :change="onchange" :kw="3" ></myradio>
	        			</label>
	        			dfasd fdsagd a电饭锅是大法官的双方各
        			</p>
        			<input type="text" placeholder="输入备注" />
        		</li>
        	</ul>
        </div>
        
        <div id="choseTime" class="open-picker">
        	<label>预期进场时间</label>
        	<p>{{expectInDate}}</p>
        	<i></i>
        </div>
        
        <div class="btn-cont">
        	<button>提交</button>
        </div>
    </div>
</template>

<script>
import http from '../services/http';
import mycheckbox from "../components/mycheckbox.vue";
import myradio from "../components/myradio.vue";
import myTimePiker from '../assets/js/myTimePiker';
import myAsyncPiker from '../assets/js/myAsyncPiker';
import { mapState } from 'vuex';
	
export default {
	name:'serve-create',
    data() {
      return {
      	myradio: {},
      	testdata: {},
      	detail: {},
      	expectInDate: "请选择时间",
      	serveName: "",
      }
    },
    computed:{
    	...mapState({
    		menuList: state => state.serve.menuList,
    	})
    },
    props:['toast'],
    created(){
		this.serveName = this.$route.query.serveName;
		this.getDetail(this.$route.query.serveId);
	},
    mounted() {
    	const {menuList} = this;
    	myTimePiker('choseTime',this,"expectInDate");
    	this.$store.dispatch({ type: 'getMenuList' }).then(data=>{
    		let dataSource = [];
    		Object.keys(data).forEach(item=>{
    			item = data[item];
    			let options = {
    				name:item.name,
    				id:item.id,
    				type:1,
    				sub:[],
    			};
    			item.sub.forEach(child=>{
    				options.sub.push({
    					id:child.id,
    					name:child.name,
    					type:0
    				})
    			});
    			dataSource.push(options);
    		})
    		myAsyncPiker('serveName',dataSource,[0, 0],data=>{
    			this.$set(this.$data,'serveName',data[1].text);
    			this.getDetail(data[1].id);
    		});
    	});
	},
	methods: {
		getDetail(serveId){
			let {detail} = this;
			http.get("/isp/api/v1/public/service/serviceTree", (redata) => {
				if(redata.success) {
					redata.data.forEach(item=>{
						if(item.id == serveId){
							detail = item;
							this.$set(this.$data,'detail',item);
							console.log(detail);
						}
					})
				} 
			})
		},
		onchange(data) {
			this.myradio = { ...data };
		},
		getStatus(status, kw, ds) {
			console.log(this[ds]);
			this[ds][kw] = status;
			this[ds] = { ...this[ds]
			};
		},
	},
	components: {
		myradio,
		mycheckbox
	}
};
</script>



<style lang="scss">
.page-servecreate {
	background: #f5f5f5;
	padding-top: 10px;
	font-size: 1rem;
	
	.open-picker{
		height: 50px;
		width: 100%;	
		background: #ffffff;
		padding: 0 30px 0 15px;
		position: relative;
		line-height: 50px;
		margin-bottom: 10px;
		
		label{
			position: absolute;
			left: 15px;
			top: 0;
			display: block;
			height: 100%;
			background: #ffffff;
			width: auto;
			padding-right: 5px;
			color: #666666;
		}
		P{
			text-align: right;
			height: 100%;
			width: auto;
			right: 25px;
			color: #979797;
		}
		i{
			display: block;
			position: absolute;
			right: 15px;
			top: 0;
			height: 100%;
			width: 10px;
			background: transparent url(../assets/img/icon/register-right.png) no-repeat center / 6px auto;
		}
 
	}
	
	.item{
		background: #ffffff;
		margin-bottom: 10px;
		
		.title{
			border-bottom: solid 1px #e6e6e6;
			padding: 10px 0;
			
			h3{
				padding: 0 15px;
				height: 30px;
				line-height: 30px;
				font-weight: 600;
				text-align: left;
				width: 100%;
				overflow: hidden;
				font-size: 1.02rem;
				color: #434a4d;
				font-family: "微软雅黑";
			}
			p{
				padding: 0 15px;
				line-height: 20px;
				color: #979797;
				font-size: 0.9rem;
			}
		}
		
		&.input ul{
			padding: 0 15px;
			li{
				padding: 12px 0;
				line-height: 1.5rem;
				color: #666667;
				padding-left: 100px;
				position: relative;
				border-bottom: solid 1px #e6e6e6;
				label{
					line-height: 48px;
					position: absolute;
					display: block;
					height: 100%;
					width: auto;
					left: 0;
					top: 0;
					em{
						display: none;
						color: #ff873f;
					}
				}
				&.require em{
					display: inline;
				}
				input{
					height: 1.5rem;
					width: 100%;
					border: none;
				}
			}
		}
		
		&.checkbox ul{
			padding: 0 15px;
			li{
				border-bottom: solid 1px #e6e6e6;
				p{
					padding: 12px 0;
					line-height: 1.5rem;
					color: #666667;
					padding-left: 30px;
					position: relative;
					label{
						position: absolute;
						display: block;
						height: 100%;
						width: auto;
						left: 0;
						top: 0;
						span{
						    float: left;
    						margin-top: 15px;
						}
					}
				}
				input{
					height: 35px;
					border-radius: 4px;
					width: 100%;
					border: none;
					padding: 5px 10px;
					background: #f5f5f5;
					margin-bottom: 15px;
				}
			}
		}
		
		&.radio ul{
			padding: 0 15px;
			li{
				border-bottom: solid 1px #e6e6e6;
				p{
					padding: 12px 0;
					line-height: 1.5rem;
					color: #666667;
					padding-left: 30px;
					position: relative;
					label{
						position: absolute;
						display: block;
						height: 100%;
						width: auto;
						left: 0;
						top: 0;
						span{
						    float: left;
    						margin-top: 15px;
						}
					}
				}
				input{
					height: 35px;
					border-radius: 4px;
					width: 100%;
					border: none;
					padding: 5px 10px;
					background: #f5f5f5;
					margin-bottom: 15px;
				}
			}
		}
	}
	
	.btn-cont{
		padding: 15px;
		button{
			width: 100%;
			border-radius: 4px;
			background: #2dbe60;
			height: 40px;
			line-height: 40px;
			text-align: center;
			font-size: 1.1rem;
			color: #ffffff;
		}
	}
}
</style>
